<template>
	<!-- 卡片组件 -->
	<view class="card">
		<!-- 主标题 -->
		<view v-if="titleText||numTitle" class="title">
			<text class="font-number">{{numTitle}}</text>{{titleText}}
		</view>
		<view class="content">
			<!-- 内容不固定 默认为输入框 -->
			<slot>
				<!-- default  unit  select textarea -->
				<!-- 默认 -->
				<u-input v-if="tInputType==='default'" :placeholder="placeholder||'请输入'" border="bottom" v-model="value"
					@change="inputEvent">
				</u-input>
				<!-- 有单位 -->
				<u-input v-else-if="tInputType==='unit'" :placeholder="placeholder||'请输入'" border="bottom"
					v-model="value">
					<template #suffix>
						<text>{{unit}}</text>
					</template>
				</u-input>
				<!-- 选择 -->
				<view v-else-if="tInputType==='select'" @click="show = true" class="select-btn">
					<text v-if="value">{{value}}</text>
					<text v-else class="placeholder">{{placeholder||'请选择'}}</text>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
				<!-- 文本域 -->
				<u-textarea v-else-if="tInputType==='textarea'" v-model="value"
					:placeholder="placeholder||'请输入'"></u-textarea>
			</slot>
		</view>
		<!-- 副标题 -->
		<block v-if="subtitle">
			<view class="subtitle">
				{{subtitleText}}
			</view>
			<view class="sub-cont">
				<!-- 内容不固定 默认为输入框 -->
				<slot>
					<!-- default  unit  select textarea -->
					<!-- 默认 -->
					<u-input v-if="sInputType==='default'" :placeholder="placeholder||'请输入'" border="bottom"
						v-model="value">
					</u-input>
					<!-- 有单位 -->
					<u-input v-else-if="sInputType==='unit'" :placeholder="placeholder||'请输入'" border="bottom"
						v-model="value">
						<template #suffix>
							<text>{{unit}}</text>
						</template>
					</u-input>
					<!-- 选择 -->
					<view v-else-if="sInputType==='select'" @click="show = true" class="select-btn">
						<text v-if="value">{{value}}</text>
						<text v-else class="placeholder">{{placeholder||'请选择'}}</text>
						<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
					</view>
					<!-- 文本域 -->
					<u-textarea v-else-if="sInputType==='textarea'" v-model="value"
						:placeholder="placeholder||'请输入'"></u-textarea>
				</slot>
			</view>
		</block>
		<u-action-sheet @close='show=false' :actions="list" :show="show" cancelText='取消' round="20"
			:closeOnClickOverlay="true" :closeOnClickAction="true" @select="selectClick"></u-action-sheet>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const value = ref("")
	/**
	 * 卡片 时间选择器
	 * @description 可以同时选择日期和时间的选择器
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
	 * @property {String} type = [datetime | date | time] 显示模式
	 * @property {Boolean} multiple = [true|false] 是否多选
	 * @property {String|Number} value 默认值
	 * @property {String|Number} start 起始日期或时间
	 * @property {String|Number} end 起始日期或时间
	 * @property {String} return-type = [timestamp | string]
	 * @event {Function} change  选中发生变化触发
	 */
	// 父传子
	const props = defineProps({
		// 占位符文字
		placeholder: String,
		// 数字标题
		numTitle: String,
		// 文字标题
		titleText: String,
		// 大标题输入框类型
		tInputType: {
			type: String,
			default: "default" // default  unit  select textarea
		},
		// 是否有副标题
		subtitle: {
			type: Boolean,
			default: false
		},
		// 副标题
		subtitleText: String,
		// 副标题输入框类型
		sInputType: {
			type: String,
			default: "default" // default  unit  select textarea
		},
		// 输入框的单位
		unit: {
			type: String,
			default: "年"
		},
		// 菜单内容
		list: {
			type: Array,
			default: [{
				name: '选项一',
				id: 1
			}, {
				name: '选项二',
				id: 2
			}]
		},
	});
	// 子传父
	const emit = defineEmits(['selectMenu', 'modelValue'])

	// 操作菜单--------------
	const show = ref(false) // 操作菜单是否显示
	// 操作菜单数据
	const list = ref([])
	list.value = props.list

	const selectClick = (item) => {
		console.log(item);
		emit('selectMenu', item)
	}
	// --------------操作菜单

	// 数据绑定
	const inputEvent = (e) => {
		emit('modelValue', e)
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		color: #333333;
		font-size: 32rpx;
	}

	.card {
		background-color: #ffffff;
		margin-bottom: 16rpx;
		padding: 30rpx 32rpx;
		border-radius: 24rpx;

		.title,
		.subtitle {
			margin-bottom: 16rpx;
		}

		.title {
			.font-number {
				font-weight: bold;
				margin-right: 12rpx;
			}
		}

		.select-btn {
			border-bottom: 1px solid #dadbde;
			height: 72rpx;
			line-height: 72rpx;
			display: flex;
			justify-content: space-between;
			padding-right: 10px;

			.placeholder {
				color: rgba(51, 51, 51, .3);
			}
		}

		.subtitle {
			color: #666666;
			font-size: 26rpx;
			margin-top: 32rpx;
		}
	}

	::v-deep .u-border-bottom {
		padding-left: 0 !important;
	}
</style>